<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="名称">
                <el-input v-model.trim="form.modelName" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item label="路面类型">
                <el-select v-model.trim="form.pavementType" clearable placeholder="请选择">
                    <el-option v-for="(item, index) in RoadTypeOptions" :key="index" :label="item.label" :value="item.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="技术等级">
                <el-select v-model.trim="form.roadType" clearable placeholder="请选择">
                    <el-option v-for="(item, index) in TechnologyLevelOptions" :key="index" :label="item.label" :value="item.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c56_d254_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c56_d254_2' }" type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>

        <div slot="button">
            <BaseButton v-permission="{ btnCode: 'dlyh_c56_d251_2' }" @click="handleAdd">新增</BaseButton>
            <BaseButton v-permission="{ btnCode: 'dlyh_c56_d252_2' }" style="margin-right: 8px" :disabled="selectionList.length === 0" type="second" @click="handleDelete">
                删除
            </BaseButton>
        </div>

        <!--数据列表区-->
        <BaseTable
            slot="table"
            v-loading="listLoading"
            :columns="columns"
            :data="list"
            row-key="id"
            height="calc(100% - 73px)"
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
            <template #handle="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: 'dlyh_c56_d253_2' }" type="text" @click="handleEdit(row.id)">修改</BaseButton>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="total"
            @current-change="getList"
            @size-change="getList"
        />
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import reconfirm from '@/utils/reconfirm'
import { RoadConditionsModel } from '@/models'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import { DirectionOptions } from '@/config/constants'
import { RoadTypeOptions } from '@/views/technical-evaluation/constants'
import { TechnologyLevelOptions } from '@/views/auxiliary-decision/constants'

export default {
    name: 'MaintenanceRecord',
    components: {
        BasePage
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                modelName: '',
                pavementType: '',
                roadType: ''
            },
            conditionObjKey: 'form'
        })
    ],
    data() {
        return {
            RoadTypeOptions,
            TechnologyLevelOptions,
            DirectionOptions,
            model: new RoadConditionsModel(),
            form: {
                modelName: '',
                pavementType: '',
                roadType: ''
            },
            listLoading: true,
            list: [],
            total: 0,
            page: {
                pageNo: 1,
                pageSize: 10
            },
            selectionList: [],
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection',
                        width: '56'
                    }
                },
                {
                    attrs: {
                        prop: 'modelName',
                        label: '名称',
                        'show-overflow-tooltip': true,
                        'min-width': '160'
                    }
                },
                {
                    attrs: {
                        prop: 'roadType',
                        label: '技术等级',
                        'show-overflow-tooltip': true,
                        width: '130'
                    }
                },
                {
                    attrs: {
                        prop: 'pavementType',
                        label: '路面类型',
                        'show-overflow-tooltip': true,
                        width: '130'
                    }
                },
                {
                    attrs: {
                        prop: 'xxx',
                        label: 'AADT',
                        'show-overflow-tooltip': true,
                        align: 'center'
                    },
                    children: [
                        {
                            attrs: {
                                prop: 'aadtMild',
                                label: '轻交通',
                                'show-overflow-tooltip': true,
                                width: '100'
                            }
                        },
                        {
                            attrs: {
                                prop: 'aadtHeavy',
                                label: '重交通',
                                'show-overflow-tooltip': true,
                                width: '120'
                            }
                        },
                        {
                            attrs: {
                                prop: 'aadtMiddle',
                                label: '中交通',
                                'show-overflow-tooltip': true,
                                width: '100'
                            }
                        }
                    ]
                },
                {
                    attrs: {
                        prop: 'xxx',
                        label: 'PCI',
                        'show-overflow-tooltip': true,
                        align: 'center'
                    },
                    children: [
                        {
                            attrs: {
                                prop: 'pciPoor',
                                label: '次差',
                                'show-overflow-tooltip': true,
                                width: '80'
                            }
                        },
                        {
                            attrs: {
                                prop: 'pciGood',
                                label: '优良',
                                'show-overflow-tooltip': true,
                                width: '80'
                            }
                        },
                        {
                            attrs: {
                                prop: 'rqiMiddle',
                                label: '中等',
                                'show-overflow-tooltip': true,
                                width: '120'
                            }
                        }
                    ]
                },
                {
                    attrs: {
                        prop: 'xxx',
                        label: 'RQI',
                        'show-overflow-tooltip': true,
                        align: 'center'
                    },
                    children: [
                        {
                            attrs: {
                                prop: 'rqiPoor',
                                label: '次差',
                                'show-overflow-tooltip': true,
                                width: '80'
                            }
                        },
                        {
                            attrs: {
                                prop: 'rqiGood',
                                label: '优良',
                                'show-overflow-tooltip': true,
                                width: '80'
                            }
                        },
                        {
                            attrs: {
                                prop: 'rqiMiddle',
                                label: '中等',
                                'show-overflow-tooltip': true,
                                width: '120'
                            }
                        }
                    ]
                },
                {
                    attrs: {
                        prop: 'xxx',
                        label: 'RDI',
                        'show-overflow-tooltip': true,
                        align: 'center'
                    },
                    children: [
                        {
                            attrs: {
                                prop: 'rdiPoor',
                                label: '次差',
                                'show-overflow-tooltip': true,
                                width: '80'
                            }
                        },
                        {
                            attrs: {
                                prop: 'rdiGood',
                                label: '优良',
                                'show-overflow-tooltip': true,
                                width: '80'
                            }
                        },
                        {
                            attrs: {
                                prop: 'rdiMiddle',
                                label: '中等',
                                'show-overflow-tooltip': true,
                                width: '120'
                            }
                        }
                    ]
                },
                {
                    attrs: {
                        prop: 'xxx',
                        label: 'SRI',
                        'show-overflow-tooltip': true,
                        align: 'center'
                    },
                    children: [
                        {
                            attrs: {
                                prop: 'sriDeficiency',
                                label: '不足',
                                'show-overflow-tooltip': true,
                                width: '80'
                            }
                        },
                        {
                            attrs: {
                                prop: 'sriEnough',
                                label: '足够',
                                'show-overflow-tooltip': true,
                                width: '80'
                            }
                        }
                    ]
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '150',
                        fixed: 'right'
                    }
                }
            ])
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            this.model
                .getList(this.form, this.page)
                .then((res) => {
                    this.list = res.list || []
                    this.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleAdd() {
            this.$router.push({ name: 'RoadConditionsAdd', query: { type: 'add' } })
        },
        handleEdit(id) {
            this.$router.push({ name: 'RoadConditionsEdit', query: { type: 'edit', id } })
        },
        handleDelete() {
            reconfirm({
                text: '是否删除当前数据',
                callback: () => {
                    const ids = this.selectionList.map((item) => item.id)
                    return this.model.delete({ ids }).then(() => {
                        this.getList()
                        this.$message.success('删除成功!')
                    })
                }
            })
        },
        handleSelectionChange(value) {
            this.selectionList = value
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
